<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>优惠券</title>
	<link rel="stylesheet" href="css/aui.css" />
   <link rel="stylesheet" href="css/style.css" />
    <style>
        .aui-bar-btn-item {
            border: none;
        }
        .aui-tab-item.aui-active{
			color: #ef4c4f;
			border-bottom: 2px solid #ef4c4f;
		}
		.aui-active{
			color: #ef4c4f;
		}
    </style>
</head>

<body class="aui-background-f6">
    <!--header-->
    <header class="aui-bar aui-bar-nav aui-background-white aui-bar-nav-search aui-text-default">
        <a class="aui-pull-left aui-btn" href="JavaScript:history.go(-1)">
	        <span class="aui-iconfont aui-icon-left aui-text-gray aui-font-size-14"></span>
	    </a>
        <div class="aui-title aui-font-size-14">
          	 优惠券
        </div>
    </header>

    <!--购物车已有商品列表-->
	<section class="aui-flexView">
           
            <section class="aui-scrollView">
                <div class="" data-ydui-tab="" style="margin-top: 2.5rem;">
                    <ul class="tab-nav b-line">
                        <li class="tab-nav-item tab-active">
                            <a href="javascript:;">
                                <span>未使用</span>
                            </a>
                        </li>
                        <li class="tab-nav-item">
                            <a href="javascript:;">
                                <span>已使用</span>
                            </a>
                        </li>
                        <li class="tab-nav-item">
                            <a href="javascript:;">
                                <span>已过期</span>
                            </a>
                        </li>
                    </ul>
                    <div class="aui-flex aui-flex-search b-line">
                        <div class="aui-flex-box">
                            <input type="text" placeholder="请输入兑换码">
                        </div>
                        <div class="aui-button-btn">
                            <button>兑换</button>
                        </div>
                    </div>
                    <div class="tab-panel">
                        <div class="tab-panel-item tab-active">
                            <a href="javascript:;" class="aui-flex">
                                <div class="aui-price-nub">
                                    <div class="aui-digit">
                                        <h2><em>￥</em>10</h2>
                                    </div>
                                    <div class="aui-full">
                                        <p>满1000元可用</p>
                                    </div>
                                </div>
                                <div class="aui-flex-box">
                                    <h2>新用户专享红包-演唱会优惠券</h2>
                                    <h3>2019.09.03~2019.09.29</h3>
                                    <button>去使用</button>
                                </div>
                            </a>
                           
                        </div>
                        <div class="tab-panel-item tab-panel-item-clear">
                            <a href="javascript:;" class="aui-flex">
                                <div class="aui-price-nub">
                                    <div class="aui-digit">
                                        <h2><em>￥</em>10</h2>
                                    </div>
                                    <div class="aui-full">
                                        <p>满1000元可用</p>
                                    </div>
                                </div>
                                <div class="aui-flex-box">
                                    <h2>新用户专享红包-演唱会优惠券</h2>
                                    <h3>2019.09.03~2019.09.29</h3>
                                    <button>已使用</button>
                                </div>
                            </a>
                           
                           
                        </div>
                        <div class="tab-panel-item tab-panel-item-clear">
                            <a href="javascript:;" class="aui-flex">
                                <div class="aui-price-nub">
                                    <div class="aui-digit">
                                        <h2><em>￥</em>10</h2>
                                    </div>
                                    <div class="aui-full">
                                        <p>满1000元可用</p>
                                    </div>
                                </div>
                                <div class="aui-flex-box">
                                    <h2>新用户专享红包-演唱会优惠券</h2>
                                    <h3>2019.09.03~2019.09.29</h3>
                                    <button>已过期</button>
                                </div>
                            </a>
                            
                            
                        </div>
                    </div>
                </div>
            </section>
        </section>


   
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/index.js"></script>
    <script>
        /*切换*/
        $('.tab-nav-item').click(function(){
        	var index = $(this).index()
        	$(this).addClass('tab-active').siblings().removeClass('tab-active')
        	$('.tab-panel-item').eq(index).addClass('tab-active').siblings().removeClass('tab-active')
        })

    </script>

</body>

</html>
